<template>
  <div class="" style="height: 100%; width: 100%">
    <tongyongbasechart :options="options" ref="reffuhe" />
  </div>
</template>
<script>
export default {
  name: "quanwangshihsibeijingchart",
  components: {},
  data() {
    return {
      options: {},
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.quanwangshishi": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    let scale = this.$root.setting.scale;
    this.options = {
      color: ["#9AE48D99", "#EEC11399", "#6A65D499", "#2BCDFF99"],
      title: {
        text: "全网实时供热量(GJ/h)",
        // top: "10%"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff",
          textStyle: {
            color: "#ffffff",
            fontSize: 30 * scale,
          },
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          inside: false,
          interval: 0, //【2019年11月6日】需要全部显示出来 线上的点也才会都在
          textStyle: {
            color: "#fff", // x轴颜色
            fontWeight: "normal",
            fontSize: 30 * scale,
            // lineHeight: 22
          },
        },
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true,
          areaStyle: {},
          // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //   {
          //     offset: 0,
          //     color: "#FE7D2F",
          //   },
          //   {
          //     offset: 1,
          //     color: "#F9D423",
          //   },
          // ]), //线条渐变色
        },
      ],
    };

    let aa = {
      color: ["#9AE48D", "#EEC113", "#6A65D4", "#2BCDFF"],
      title: {
        text: "锅炉实时燃气消耗量(m³)",
        // top: "10%"
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        top: "30%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },

      legend: {
        type: "scroll",
        // data: Line,
        // itemWidth: 18,
        // ite mHeight: 12,
        top: "10%",
        data: ["一号锅炉", "二号锅炉", "三号锅炉", "四号锅炉"],
        textStyle: {
          color: "#F5F5F5",
          fontSize: 28 * scale,
          // padding: [15, 0, 0, 0],
        },
      },
      toolbox: {
        feature: {},
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        top: "30%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["0", "2", "4", "6", "8", "10", "12"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "一号锅炉",
          type: "line",
          stack: "总量",
          smooth: true,
          areaStyle: {},
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  },
  methods: {
    loadData(n) {
      let scale = this.$root.setting.scale;
      this.options.series[0].data = [];
      this.options.xAxis.data = [];
      n.map((item) => {
        this.options.xAxis.data.push(item.aligntime.split(" ")[1]);
        this.options.series[0].data.push(item.sa_003qc);
      });

      this.$refs.reffuhe.myChart.setOption(this.options);
      // this.options
    },
  },
};
</script>
<style lang='scss' scoped>
</style>